import React, { useState } from 'react';
import {
    Dimensions,
    StyleSheet,
    Text,
    TouchableOpacity,
    View,
} from 'react-native';

import Basic from './examples/basic';
import SectionList from './examples/sectionlist';
import PerRowConfig from './examples/per_row_config';
import StandaloneRow from './examples/standalone_row';
import SwipeToDelete from './examples/swipe_to_delete';
import SwipeValueBasedUi from './examples/swipe_value_based_ui';
import Actions from './examples/actions';
import CloseRowManually from './examples/close_row_manually';

import { appStackNavigationOptions } from '../../../../config/navigation'; 

const componentMap = {
    Basic,
    SectionList,
    PerRowConfig,
    StandaloneRow,
    SwipeToDelete,
    SwipeValueBasedUi,
    Actions,
    CloseRowManually,
};

const RNSwipeExamples = () => {
    const [mode, setMode] = useState('Basic');

    const renderExample = () => {
        const Component = componentMap[mode];
        return <Component />;
    };

    return (
        <View style={styles.container}>
            <View style={styles.switchContainer}>
                {Object.keys(componentMap).map(type => (
                    <TouchableOpacity
                        key={type}
                        style={[
                            styles.switch,
                            {
                                backgroundColor:
                                    mode === type ? 'grey' : 'white',
                            },
                        ]}
                        onPress={() => setMode(type)}
                    >
                        <Text>{type}</Text>
                    </TouchableOpacity>
                ))}
            </View>
            {renderExample()}
        </View>
    );
}

const styles = StyleSheet.create({
  container: {
      backgroundColor: 'white',
      flex: 1,
  },
  switchContainer: {
      flexDirection: 'row',
      justifyContent: 'center',
      marginVertical: 50,
      flexWrap: 'wrap',
  },
  switch: {
      alignItems: 'center',
      borderWidth: 1,
      borderColor: 'black',
      marginVertical: 2,
      paddingVertical: 10,
      width: Dimensions.get('window').width / 3,
  },
});

class RNSwipeListView extends React.Component {
  static options = appStackNavigationOptions(() => {
    return {
      title: 'swipe-list-view',
      dark: false,
      backIcon: 'logo-firebase',      
      headerStyle: {
        backgroundColor: '#FAFAFA',
      }
    };
  });
  constructor(props) {
    super(props)
  }
  render() {
    const { navigation } = this.props;
    return <RNSwipeExamples navigation={navigation}/>
  }
}

export default RNSwipeListView;
